
<style>
		figure { display: block; width: 100%; height: 100%; margin: 0 }
		figcaption { text-align:right;height:400px; min-width:100px; padding: 10px 8px; position: absolute; bottom: 0px; right: 0px; z-index: 3; background: black; background: rgba(0,0,0,0.7); color: white;
		-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px 
		}
		figcaption2 { height:400px; min-width:100px; margin-right:<?php echo $pixel?>px; padding: 10px 8px; float:right; position: absolute; bottom: 0px; right: 0px; z-index: 3; background: black; background: rgba(0,0,0,0.7); color: white;
		-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px 
		}
</style>

	
<div class="span-18">
<!-- slider accordion -->
	<div id="slider_accordion">
		<div style="height: 320px; width: 960px;" id="one" class="accordion dark basic">
			<ol>
				<?php foreach ($arr_brand as $urai_brand):?>
					<li>
						<h2 class="" style="width: 320px; height: 48px;"><span><?php echo $urai_brand['deskripsi'];?></span><b></b></h2>
							<?php if ($urai_brand['caption'] == 1):?>
								<div style="width: 720px; padding-left: 48px;">
									<figure>
										<img src="<?php echo base_url()?>public/brand_slide/<?php echo $urai_brand['brand_img_url_slider'];?>" alt="image">
										<figcaption style="display: block;">
												<div style="color:#ff9900;font-size:16px;margin-bottom:2px;padding:0">Categories</div>
											<?php echo getBrandKategori($urai_brand['brand_id'],'right');?>
										</figcaption>
									</figure>
								</div>
								
							<?php elseif ($urai_brand['caption'] == 2):?>
								<div style="width: 720px; padding-left: 48px;">
									<figure>
										<img src="<?php echo base_url()?>public/brand_slide/<?php echo $urai_brand['brand_img_url_slider'];?>" alt="image">
										<figcaption style="display: block;">
												<div style="color:#ff9900;font-size:16px;margin-bottom:2px;padding:0">Categories</div>
											<?php echo getBrandKategori($urai_brand['brand_id'],'right');?>
										</figcaption>
			

										<figcaption2 style="display: block;">
											<div style="color:#ff9900;font-size:16px;margin-bottom:1px;padding:0">Categories</div>
											<?php echo getBrandKategori2($urai_brand['brand_id'],'left');?>
										</figcaption2>
									</figure>
								</div>
							<?php elseif ($urai_brand['caption'] == 3):?>	
								<div style="width: 720px; padding-left: 48px;">
									<figure>
											<img src="<?php echo base_url()?>public/brand_slide/<?php echo $urai_brand['brand_img_url_slider'];?>" alt="image">
									</figure>
								</div>
							<?php endif;?>
					</li>
				<?php endforeach;?>
			</ol>
			<noscript>
			<p>Please enable JavaScript to get the full experience.</p>
			</noscript>
		</div>
	</div>	 
</div> 

<script type="text/javascript">
// liteAccordion demos
$('#one').liteAccordion({
	onActivate : function() {
		this.find('figcaption').fadeOut();
		this.find('figcaption2').fadeOut();
	},
	slideCallback : function() {	
		this.find('figcaption').fadeIn();
		this.find('figcaption2').fadeIn();
	},
	autoPlay : true,
	pauseOnHover : true,
	theme : 'dark',
	rounded : true,
	containerWidth : 690,
	containerHeight : 410,
	slideSpeed : 600,
	enumerateSlides : true					
}).find('figcaption:first').show();
$('#two').liteAccordion(
{
	onActivate : function() {
		this.find('figcaption').fadeOut();
		this.find('figcaption2').fadeOut();
	},
	slideCallback : function() {	
		this.find('figcaption').fadeIn();
		this.find('figcaption2').fadeIn();
	},
	autoPlay : true,
	pauseOnHover : true,
	containerWidth : 710, 
	containerHeight : 400, 
	slideSpeed : 600
});
$('#three').liteAccordion({ theme : 'dark', containerWidth : 600, containerHeight : 200, slideSpeed : 600, firstSlide : 2 });
</script>

<!-- end of slider accordion -->

<script type="text/javascript">

$(document).ready(function(){	
	var first = 0;
	var speed = 700;
	var pause = 5000;
	
	function removeFirst(){
		first = $('ul#listticker li:first').html();
		$('ul#listticker li:first')
		.animate({opacity: 0}, speed)
		.fadeOut('slow', function() {$(this).remove();});
		addLast(first);
	}
	
	function addLast(first){
		last = '<li style="display:none">'+first+'</li>';
		$('ul#listticker').append(last)
		$('ul#listticker li:last')
		.animate({opacity: 1}, speed)
		.fadeIn('slow')
	}
	
	interval = setInterval(removeFirst, pause);
});
</script>

<!-- news ticker -->
<div class="span-6 last">
	<div id="slider_new_item">
		<div class="tag_title">
			NEWSTICKER
		</div>
		<div class="tag">
			<ul id="listticker">
				<?php foreach($arr_tick as $row_tick):?>
					<li>
						<span class="news-text">
						<img width="34%" src="<?php echo base_url().'public/ticker/'.$row_tick['img_url_small'];?>">
						<?php echo $row_tick['isi_konten'];?>
						</span>
					</li>
				<?php endforeach?>
			</ul>
		</div>
	</div>	 
</div> 
<!-- endof news ticker -->
